<div ng-if="ctrl.panel.alert">
  <div class="alert alert-error m-b-2" ng-show="ctrl.error">
    <i class="fa fa-warning"></i> {{ctrl.error}}
  </div>
  <div class="panel-options-group">
    <div class="panel-options-group__body">
      <div class="gf-form-group">
        <h4 class="section-heading">规则</h4>
        <div class="gf-form-inline">
          <div class="gf-form">
            <span class="gf-form-label width-6">名字</span>
            <input type="text" class="gf-form-input width-20" ng-model="ctrl.alert.name">
          </div>
          <div class="gf-form">
            <span class="gf-form-label width-9">评估每一个</span>
            <input class="gf-form-input max-width-6" type="text" ng-model="ctrl.alert.frequency">
          </div>
          <div class="gf-form max-width-11">
            <label class="gf-form-label width-5">For</label>
            <input type="text" class="gf-form-input max-width-6 gf-form-input--has-help-icon" ng-model="ctrl.alert.for"
                  spellcheck='false' placeholder="5m">
            <info-popover mode="right-absolute">
              如果警报规则已配置为For且查询违反配置
               它的门槛
               将首先从OK转为待定。
               从OK到Pending Grafana不会发送任何通知。 一旦发出警报
               规则
               拥有
               射击时间超过持续时间，它将变为警报并发送警报
              通知.
            </info-popover>
          </div>
        </div>
      </div>

      <div class="gf-form-group">
        <h4 class="section-heading">条件</h4>
        <div class="gf-form-inline" ng-repeat="conditionModel in ctrl.conditionModels">
          <div class="gf-form">
            <metric-segment-model css-class="query-keyword width-5" ng-if="$index"
                                  property="conditionModel.operator.type" options="ctrl.evalOperators"
                                  custom="false"></metric-segment-model>
            <span class="gf-form-label query-keyword width-5" ng-if="$index===0">什么时候</span>
          </div>
          <div class="gf-form">
            <query-part-editor class="gf-form-label query-part width-9"
                                part="conditionModel.reducerPart"
                                handle-event="ctrl.handleReducerPartEvent(conditionModel, $event)">
            </query-part-editor>
            <span class="gf-form-label query-keyword">OF</span>
          </div>
          <div class="gf-form">
            <query-part-editor class="gf-form-label query-part" part="conditionModel.queryPart"
                                handle-event="ctrl.handleQueryPartEvent(conditionModel, $event)">
            </query-part-editor>
          </div>
          <div class="gf-form">
            <metric-segment-model property="conditionModel.evaluator.type" options="ctrl.evalFunctions"
                                  custom="false" css-class="query-keyword"
                                  on-change="ctrl.evaluatorTypeChanged(conditionModel.evaluator)"></metric-segment-model>
            <input class="gf-form-input max-width-9" type="number" step="any"
                    ng-hide="conditionModel.evaluator.params.length === 0"
                    ng-model="conditionModel.evaluator.params[0]"
                    ng-change="ctrl.evaluatorParamsChanged()" />
            <label class="gf-form-label query-keyword"
                    ng-show="conditionModel.evaluator.params.length === 2">TO</label>
            <input class="gf-form-input max-width-9" type="number" step="any"
                    ng-if="conditionModel.evaluator.params.length === 2"
                    ng-model="conditionModel.evaluator.params[1]"
                    ng-change="ctrl.evaluatorParamsChanged()" />
          </div>
          <div class="gf-form">
            <label class="gf-form-label">
              <a class="pointer" tabindex="1" ng-click="ctrl.removeCondition($index)">
                <i class="fa fa-trash"></i>
              </a>
            </label>
          </div>
        </div>

        <div class="gf-form">
          <label class="gf-form-label dropdown">
            <a class="pointer dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-plus"></i>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li ng-repeat="ct in ctrl.conditionTypes" role="menuitem">
                <a ng-click="ctrl.addCondition(ct.value);">{{ct.text}}</a>
              </li>
            </ul>
          </label>
        </div>
      </div>

      <div class="gf-form-group">
        <h4 class="section-heading">没有数据和错误处理</h4>
        <div class="gf-form-inline">
          <div class="gf-form">
            <span class="gf-form-label width-15">如果没有数据或所有值都为null</span>
          </div>
          <div class="gf-form">
            <span class="gf-form-label query-keyword">SET STATE TO</span>
            <div class="gf-form-select-wrapper">
              <select class="gf-form-input" ng-model="ctrl.alert.noDataState"
                                            ng-options="f.value as f.text for f in ctrl.noDataModes">
              </select>
            </div>
          </div>
        </div>

        <div class="gf-form-inline">
          <div class="gf-form">
            <span class="gf-form-label width-15">如果执行错误或超时</span>
          </div>
          <div class="gf-form">
            <span class="gf-form-label query-keyword">SET STATE TO</span>
            <div class="gf-form-select-wrapper">
              <select class="gf-form-input" ng-model="ctrl.alert.executionErrorState"
                                            ng-options="f.value as f.text for f in ctrl.executionErrorModes">
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="panel-options-group">
    <div class="panel-options-group__header">通知</div>
    <div class="panel-options-group__body">
      <div class="gf-form-inline">
        <div class="gf-form">
          <span class="gf-form-label width-8">发给</span>
        </div>
        <div class="gf-form" ng-repeat="nc in ctrl.alertNotifications">
          <span class="gf-form-label" ng-style="{'background-color': nc.bgColor }">
            <i class="{{nc.iconClass}}"></i>&nbsp;{{nc.name}}&nbsp;
            <i class="fa fa-remove pointer muted" ng-click="ctrl.removeNotification(nc)" ng-if="nc.isDefault === false"></i>
          </span>
        </div>
        <div class="gf-form">
          <metric-segment segment="ctrl.addNotificationSegment"
                          get-options="ctrl.getNotifications()"
                          on-change="ctrl.notificationAdded()"></metric-segment>
        </div>
      </div>
      <div class="gf-form gf-form--v-stretch">
        <span class="gf-form-label width-8">信息</span>
        <textarea class="gf-form-input" rows="10" ng-model="ctrl.alert.message"
                  placeholder="Notification message details..."></textarea>
      </div>
      <div class="gf-form">
        <span class="gf-form-label width-8">标签</span>
        <div class="gf-form-group">
          <div class="gf-form-inline" ng-repeat="(name, value) in ctrl.alert.alertRuleTags">
            <label class="gf-form-label width-15">{{ name }}</label>
            <input class="gf-form-input width-15" placeholder="Tag value..."
                   ng-model="ctrl.alert.alertRuleTags[name]" type="text"/>
            <label class="gf-form-label">
              <a class="pointer" tabindex="1" ng-click="ctrl.removeAlertRuleTag(name)">
                <i class="fa fa-trash"></i>
              </a>
            </label>
          </div>
          <div class="gf-form-group">
            <div class="gf-form-inline">
              <div class="gf-form">
                <input class="gf-form-input width-15" placeholder="New tag name..."
                       ng-model="ctrl.newAlertRuleTag.name" type="text">
                <input class="gf-form-input width-15" placeholder="New tag value..."
                       ng-model="ctrl.newAlertRuleTag.value" type="text">
              </div>
            </div>
            <div class="gf-form">
              <label class="gf-form-label">
                <a class="pointer" tabindex="1" ng-click="ctrl.addAlertRuleTag()">
                  <i class="fa fa-plus"></i>&nbsp;添加标签
                </a>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
